const containerEle = document.querySelector('.container')
/**
 * 加载显示所有商品
 */
function showAllProducts(products) {
  let htmlTxt = template("show", {
    products
  })
  containerEle.innerHTML = htmlTxt
}

/**
 * 添加购物车
 *   本质: 将商品数据添加到localStorage
 */
function addCart(products) {
  containerEle.addEventListener('click', function (e) {
    e = e || window.event //事件对象
    let target = e.target || e.srcElement // 事件目标对象
    if (target.nodeName.toLowerCase() == 'button') {
      //1. 构造添加到购物车的商品数据
      let id = target.getAttribute('data-index')
      let product = products.find((item) => item.id == id)
      product = {
        ...product, //选中商品
        num: 1, //数量
        singlePrice: product.price, //单个商品总价
        state: false // 选中状态
      }

      //  2.1. 从localstorage取出商品数据,如果是第一次，没有返回 空数组
      let productStr = localStorage.getItem('CARTLIST')
      let carts = JSON.parse(productStr) || []
      // 3.遍历购物车商品数组， 判断添加的商品，在商品数组中是否已经存在，
      let newProduct = carts.find((item) => item.id == product.id)
      if (newProduct) {
        // 3.1如果已经存在，改变商品数量
        newProduct.num++
        newProduct.singlePrice = (newProduct.num * product.price).toFixed(2)
      } else {
        //3.2如果不存在，添加一项商品
        carts.push(product)
      }

      //  4. 已经添加数据的数组重新写回localstorage
      localStorage.setItem('CARTLIST', JSON.stringify(carts))

      alert('添加购物车成功!')
    }
  })
}

/**
 * 购物车页面
 */
function goCart() {
  const cartBtn = document.querySelector('#cartBtn')
  cartBtn.onclick = function () {
    location.href = './cart.html'
  }
}
//去详情页面
function goDetail(products) {
  containerEle.addEventListener('click', function (e) {
    e = e || window.event
    let target = e.target || e.srcElement
    if (target.getAttribute('class') == 'todetail') {

      let id = target.getAttribute('data-index')
      //返回点击的商品信息
      let product = products.find((item) => item.id == id)
      product = {
        ...product, //选中商品
        num: 1, //数量
        singlePrice: product.price, //单个商品总价
        state: false // 选中状态
      }


      //  2.1. 从localstorage取出商品数据，字符串
      let productStr = localStorage.getItem('PRODUCTDETAIL')

      let details = JSON.parse(productStr) || []

      details.unshift(product)

      //  4. 已经添加数据的数组重新写回localstorage
      localStorage.setItem('PRODUCTDETAIL', JSON.stringify(details))



    }
  })

}

//获取后端数据
function getProducts() {
  ajaxPromise({
    method: 'get',
    url: 'http://10.7.171.143:3000/api/productlist'
  }).then(data => {
    if (data.resultCode == -1) {
      alert('用户名或密码错误！')
    } else {
      showAllProducts(data)
      addCart(data)
      goDetail(data)
    }
  })
}

getProducts()
goCart()